<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>First Consult</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
  <div id="middlePan">
		<div id="middlebodyPan">
         	<br><h1 > My Appointments </h1><br>
	         	<div class="doclist">
					   <c:choose>
					   		<c:when test="${not empty myAppointments}">
					   			<ul>
								<c:forEach items="${myAppointments}" var="app"> 
								 <li>
								 <div>
									 <div style="float:left;float: left;font-size: 18px;padding-right: 50px;">
									 	<fmt:formatDate pattern="EEEE" value="${app.date}" /><br> 
									 	<span style="color:orangered; font-weight:bold;"><fmt:formatDate pattern="dd MMM yyyy" value="${app.date}" /></span><br> 
									    <fmt:formatDate pattern="h:mm a" value="${app.date}" /><br>
									 </div>
									 <div> 
									 	<img src="images/User.jpg" width=100px height=100px>
									    <h3>${app.username}</h3>
									    <p>${app.email}</p>						    
									 </div>
								  </div>
								 </li>
								</c:forEach>
								</ul>
					   		</c:when>
					   		<c:otherwise>
					   			<span style="padding: 20px;font-weight: bold;">You have no appointments to view.</span>
					   		</c:otherwise>
					   </c:choose>
					</div>
		</div>
	</div>
</body>
</html>